.navbar
  .navbar-inner
    .left.sliding
      a(href="forms.html").back.link
        i.icon.icon-back
        span Forms
    .center.sliding Form Storage
    .right
      a(href="#").link.open-panel.icon-only
        i.icon.icon-bars
.pages.navbar-through
  .page(data-page="form-storage")
    .page-content
      .content-block
        p With forms storage it is easy to store and parse forms data, especially on Ajax loaded pages. All you need to make it work is to add "store-data" class to your &lt;form&gt; and Framework7 will store form data with every input change. And the most awesome part is that when you load this page again Framework7 will parse this data and fill all form fields automatically! Just try to fill the form below and then go to any other page, or even you may close this site, and when you return here form fields will have kept your data.
      .content-block-title Personal Details
      form.store-data.list-block(id="demoform-1")
        ul
          li
            .item-content
              .item-media
                i.icon.f7-icons person
              .item-inner
                .item-title.label Name
                .item-input
                  input(type="text", placeholder="Your name", name="name")
          li
            .item-content
              .item-media
                i.icon.f7-icons email
              .item-inner
                .item-title.label E-mail
                .item-input
                  input(type="email", placeholder="E-mail", name="email")
          li
            .item-content
              .item-media
                i.icon.f7-icons world
              .item-inner
                .item-title.label URL
                .item-input
                  input(type="url", placeholder="URL", name="url")
          li
            .item-content
              .item-media
                i.icon.f7-icons lock
              .item-inner
                .item-title.label Password
                .item-input
                  input(type="password", placeholder="Password", name="password")
          li
            .item-content
              .item-media
                i.icon.f7-icons phone
              .item-inner
                .item-title.label Phone
                .item-input
                  input(type="tel", placeholder="Phone", name="phone")
          li
            .item-content
              .item-media
                i.icon.f7-icons persons
              .item-inner
                .item-title.label Gender
                .item-input
                  select
                    option Male
                    option Female
          li
            .item-content
              .item-media
                i.icon.f7-icons calendar
              .item-inner
                .item-title.label Birth date
                .item-input
                  input(type="date", placeholder="Birth day", value="2014-04-30", name="birth-date")
          li
            .item-content
              .item-media
                i.icon.f7-icons check
              .item-inner
                .item-title.label Switch
                .item-input
                  label.label-switch
                    input(type="checkbox", name="switch")
                    .checkbox
          li
            .item-content
              .item-media
                i.icon.f7-icons filter
              .item-inner
                .item-title.label Slider
                .item-input
                  .range-slider
                    input(type="range", min="0", max="100", value="50", step="0.1", name="slider")
          li.align-top
            .item-content
              .item-media
                i.icon.f7-icons chat
              .item-inner
                .item-title.label About Me
                .item-input
                  textarea(name="about-me")
      .content-block-title I like
      form.store-data.list-block(id="demoform-2")
        ul
          li
            label.label-checkbox.item-content
              input(type="checkbox", name="ks-checkbox", value="Books", checked=true)
              .item-media
                i.icon.icon-form-checkbox
              .item-inner
                .item-title Books
          li
            label.label-checkbox.item-content
              input(type="checkbox", name="ks-checkbox", value="Movies")
              .item-media
                i.icon.icon-form-checkbox
              .item-inner
                .item-title Movies
          li
            label.label-checkbox.item-content
              input(type="checkbox", name="ks-checkbox", value="Food")
              .item-media
                i.icon.icon-form-checkbox
              .item-inner
                .item-title Food
          li
            label.label-checkbox.item-content
              input(type="checkbox", name="ks-checkbox", value="Drinks")
              .item-media
                i.icon.icon-form-checkbox
              .item-inner
                .item-title Drinks
